<template>
  <div class="antd-pages-user-login-bg-container">
    <div class="antd-pages-user-login-content">
      <div id="login" class="antd-pages-user-login-main">
        <div class="antd-pages-user-login-top">
          <div class="antd-pages-user-login-header">
            <img alt="logo" class="logo" src="image/logo.svg"><span
              class="antd-pages-user-login-title">管理系统</span></div>
          <div class="antd-pages-user-login-desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
        </div>
        <div>
          <a-form
              id="components-form-demo-normal-login"
              class="login-form"
              :model="form"
              :rules="rules"
              ref="formRef"
              @submit="handleSubmit">
            <a-form-item name="username">
              <a-input placeholder="登录账号" v-model:value="form.username">
                <icon-font slot="prefix" style="color: rgba(0, 0, 0, 0.25);font-size: 16px"
                           type="lm-user"></icon-font>
              </a-input>
            </a-form-item>
            <a-form-item name="userpw">
              <a-input-password type="password" placeholder="用户密码"
                                v-model:value="form.userpw">
                <icon-font slot="prefix" style="color: rgba(0, 0, 0, 0.25);font-size: 16px"
                           type="lm-lock"></icon-font>
              </a-input-password>
            </a-form-item>
            <a-form-item name="code">
              <a-input-group compact>
                <a-input style="width: calc(100% - 80px)" placeholder="验证码" v-model:value="form.code">
                  <icon-font slot="prefix" style="color: rgba(0, 0, 0, 0.25);font-size: 16px"
                             type="lm-safetycertificate"></icon-font>
                </a-input>
                <img class="ant-input ant-input-group ant-input-group-compact"
                     style="width: 80px;height: 32px"
                     :src="codeurl"
                     @click="refreshcode">
              </a-input-group>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" block>
                登录
              </a-button>
            </a-form-item>
          </a-form>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: undefined,
        userpw: undefined,
        code: undefined
      },
      //验证码标识
      codeid: new Date().getTime() + Math.round(Math.random() * 80 + 20),
      //验证码链接
      codeurl: '',
      rules: {}
    }
  },

  created() {
    this.refreshcode();
  },
  methods: {
    //刷新验证码
    refreshcode() {
      this.codeurl = "https://oa.limiaokeji.com/erp/login/captcha?codeid=" + this.codeid + "&v=" + new Date().getTime();
      $.ajax()
    },
    handleSubmit(e) {
      this.$router.push({path:"/admin/index"})
    }
  }
}
</script>

<style scoped>
.antd-pages-user-login-main {
  max-width: 380px;
  min-width: 320px;
  padding: 0 20px;
  margin: 0 auto
}


.antd-pages-user-login-desc {
  margin-top: 12px;
  margin-bottom: 40px;
  color: rgba(0, 0, 0, .45);
  font-size: 14px
}

.antd-pages-user-login-title {
  position: relative;
  top: 2px;
  color: rgba(0, 0, 0, .85);
  font-weight: 600;
  font-size: 33px;
  font-family: Avenir, helvetica neue, Arial, Helvetica, sans-serif
}

.antd-pages-user-login-logo {
  height: 44px;
  margin-right: 16px;
  vertical-align: top
}


.antd-pages-user-login-bg-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: #f0f2f5;
  background-image: url(../../assets/svg/loginbg.svg);
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;

}

.antd-pages-user-login-content {
  padding: 72px 0 24px
}


.logo {
  height: 44px;
  vertical-align: top;
  margin-right: 16px;
  border-style: none;
}

.antd-pages-user-login-top {
  text-align: center
}

.antd-pages-user-login-header {
  height: 44px;
  line-height: 44px
}


.user-login-other {
  text-align: left;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.65);
}

.item-icon {
  font-size: 29px;
  color: #a1a1a1;
  margin-left: 20px;
  vertical-align: middle;
  cursor: pointer;
  transition: color 0.3s;
}

.item-icon:hover {
  color: #40a9ff;
}
</style>
